<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>后台管理系统</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
 <!--依次引用Vue和Axios-->
 <!--D:/MAVEN/repository/org/webjars/npm/vue/2.6.14/vue-2.6.14.jar!/META-INF/resources/webjars/vue/2.6.14/dist/vue.js-->
 <script type="text/javascript" th:src="@{/webjars/vue/2.6.14/dist/vue.js}"></script>
 <!--D:/MAVEN/repository/org/webjars/npm/axios/0.26.1/axios-0.26.1.jar!/META-INF/resources/webjars/axios/0.26.1/dist/axios.js-->
 <script type="text/javascript" th:src="@{/webjars/axios/0.26.1/dist/axios.js}"></script>
<!--[if lt IE 9]>
<script th:src="@{/js/html5.js}"></script>
<![endif]-->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/jquery.mCustomScrollbar.concat.min.js}"></script>
<script>

	(function($){
		$(window).load(function(){
			
			$("a[rel='load-content']").click(function(e){
				e.preventDefault();
				var url=$(this).attr("href");
				$.get(url,function(data){
					$(".content .mCSB_container").append(data); //load new content inside .mCSB_container
					//scroll-to appended content 
					$(".content").mCustomScrollbar("scrollTo","h2:last");
				});
			});
			
			$(".content").delegate("a[href='top']","click",function(e){
				e.preventDefault();
				$(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
			});
			
		});
	})(jQuery);
</script>
</head>
<body>
<!--header-->
<header>
 <h1><img th:src="@{/images/admin_logo.png}"/></h1>
 <ul class="rt_nav">
  <li><a th:href="@{/http://www.mycodes.net}" target="_blank" class="website_icon">站点首页</a></li>
  <li><a th:href="@{#}" class="clear_icon">清除缓存</a></li>
  <li><a th:href="@{/edit_pass.html}" class="admin_icon">修改密码</a></li>
  <li><a th:href="@{#}" class="set_icon">账号设置</a></li>
  <li><a th:href="@{/login.html}" class="quit_icon">安全退出</a></li>
 </ul>
</header>
<!--aside nav-->
<!--aside nav-->
<aside class="lt_aside_nav content mCustomScrollbar">
 <h2><a th:href="@{/index.html}">起始页</a></h2>
 <ul>
  <li>
   <dl>
    <dt>常用布局示例</dt>
    <!--当前链接则添加class:active-->
    <dd><a th:href="@{/product_list.html}">商品列表示例</a></dd>
    <dd><a th:href="@{/product_detail.html}">商品详情示例</a></dd>
    <dd><a th:href="@{/recycle_bin.html}">商品回收站示例</a></dd>
   </dl>
  </li>
  <li>
   <dl>
    <dt>订单信息</dt>
    <dd><a th:href="@{/order_list.html}">订单列表示例</a></dd>
    <dd><a th:href="@{/order_detail.html}">订单详情示例</a></dd>
   </dl>
  </li>
  <li>
   <dl>
    <dt>会员管理</dt>
    <dd><a th:href="@{/user_list.html}">会员列表示例</a></dd>
    <dd><a th:href="@{/address_list.html}" class="active">收货地址列表示例</a></dd>
    <dd><a th:href="@{/user_rank.html}">会员等级示例</a></dd>
    <dd><a th:href="@{/adjust_funding.html}">会员资金管理示例</a></dd>
   </dl>
  </li>
  <li>
   <dl>
    <dt>基础设置</dt>
    <dd><a th:href="@{/setting.html}">站点基础设置示例</a></dd>
   </dl>
  </li>
  <li>
   <dl>
    <dt>配送与支付设置</dt>
    <dd><a th:href="@{/express_list.html}">配送方式</a></dd>
    <dd><a th:href="@{/pay_list.html}">支付方式</a></dd>
   </dl>
  </li>
  <li>
   <dl>
    <dt>在线统计</dt>
    <dd><a th:href="@{/discharge_statistic.html}">流量统计</a></dd>
    <dd><a th:href="@{/sales_volume.html}">销售额统计</a></dd>
   </dl>
  </li>
  <li>
   <p class="btm_infor">© DeathGhost.cn 版权所有</p>
  </li>
 </ul>
</aside>

<section class="rt_wrap content mCustomScrollbar">
 <div class="rt_content" id="app">
      <div class="page_title">
       <h2 class="fl">收货地址列表</h2>
       <a th:href="@{address_add.html}" class="fr top_rt_btn add_icon">添加收货地址</a>
      </div>
      <section class="mtb">
       <input type="text" name="phoneNumber" class="textbox textbox_225" placeholder="输入手机号查询..." v-model="phoneNumber"/>
       <input type="text" name="addressee" class="textbox textbox_225" placeholder="输入收件人查询..." v-model="addressee"/>
       <input type="button" value="查询" class="group_btn" @click="search()"/>
      </section>
      <table class="table">
       <thead>
       <tr>
        <th>用户Id</th>
        <th>用户名</th>
        <th>邮编</th>
        <th>详细地址</th>
        <th>收件人</th>
        <th>电话号码</th>
        <th>省</th>
        <th>市</th>
        <th>区</th>
        <th>操作</th>
       </tr>
       </thead>
       <tbody>
       <tr v-for="u in addressList" :key="u.id">
        <td class="center">{{u.id}}</td>
        <td class="center">{{u.userMessage.username}}</td>
        <td class="center">{{u.postcode}}</td>
        <td class="center">{{u.detailedAddress}}</td>
        <td class="center">{{u.addressee}}</td>
        <td class="center">{{u.phoneNumber}}</td>
        <td class="center">{{u.province}}</td>
        <td class="center">{{u.city}}</td>
        <td class="center">{{u.district}}</td>
        <td class="center">
         <a :href="'/address_detail/'+u.id" title="编辑" class="link_icon">&#101;</a>
         <a :href="'/address/delete/'+u.id" title="删除" class="link_icon">&#100;</a>
        </td>
       </tr>
       </tbody>

      </table>
      <aside class="paging">
       <a>第一页</a>
       <a>1</a>
       <a>2</a>
       <a>3</a>
       <a>…</a>
       <a>1004</a>
       <a>最后一页</a>
      </aside>
 </div>
</section>
 <script type="text/javascript">
  var vm = new Vue({
   el: "#app",
   data: {
    addressList: [],
    phoneNumber: null,
    addressee: null
   },
   mounted: function () {
    axios.get("/address/list")
            .then(function (response) {
             vm.addressList = response.data;
            });
   },
   methods: {
    search:function () {
     axios.get("/address/list", {
              params: {
               phoneNumber: vm.phoneNumber,
               addressee: vm.addressee
              }
            }
             )
             .then(function (response) {
              vm.addressList = response.data;
             });
    }
   }
  });
 </script>
</body>
</html>
